<script setup lang="ts">
import type { FormInst } from 'naive-ui';
import { ref } from 'vue';
import { useAppStore } from '@/store/modules/app';
const appStore = useAppStore();
const formRef = ref<FormInst | null>(null);
const emit = defineEmits(['search']);
const formValue = ref({
  name: ''
});
const searchFun = (name: string, index: number) => {
  emit('search', { name, index });
};
const cancel = (index: number) => {
  formValue.value.name = '';
  emit('search', { name: '', index });
};
</script>

<template>
  <NForm
    ref="formRef"
    :inline="!appStore.isMobile"
    :label-width="80"
    :model="formValue"
    :label-placement="!appStore.isMobile ? 'left' : 'top'"
    class="search_form"
  >
    <NFormItem label="商品名称" path="name">
      <NInput v-model:value="formValue.name" style="width: 300px" placeholder="请输入商品名称" />
    </NFormItem>
    <NFormItem class="search_btn">
      <NButton
        attr-type="button"
        type="primary"
        style="margin-right: 20px; float: right"
        @click="searchFun(formValue.name, 1)"
      >
        搜索
      </NButton>
      <NButton attr-type="button" style="float: right" @click="cancel(2)">清空</NButton>
    </NFormItem>
  </NForm>
</template>

<style lang="scss">
.search_form {
  .search_btn {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
